<template>
  <div
    class="term-block irremovable"
    contenteditable="false"
    data-type="terms"
    :class="$store.getters.isTermDoc ? 'term-doc' : ''"
    :data-block-id="blockData.blockId"
  >
    <!-- 用于定位，大纲处进行跳转 -->
    <p
      class="list-title irremovable"
      :data-id="blockData.blockId"
      :data-type="termListTitleType"
      contenteditable="false"
    >
      <span contenteditable="false" data-content-type="chapter_title_zh" class="chapter-title-zh irremovable">{{
        termData.nameZh
      }}</span
      >&#8204;
      <span contenteditable="false" data-content-type="chapter_title_en" class="chapter-title-en irremovable">{{
        termData.nameEn
      }}</span
      >&#8203;
    </p>
    <template v-if="jsonContent">
      <component
        v-for="(item, index) of blockList"
        :is="getComponentName(item)"
        :key="item.blockId + index"
        :blockData="item"
      />
    </template>
    <template v-else>
      <p class="irremovable" v-if="termData.description" contenteditable="false" data-type="paragraph" data-lang="zh">
        {{ termData.description }}
      </p>
      <p class="irremovable" v-if="termData.descriptionEn" contenteditable="false" data-type="paragraph" data-lang="en">
        {{ termData.descriptionEn }}
      </p>
      <!-- <p class="irremovable" v-if="termData.source" contenteditable="false">{{ termData.source }}</p> -->
      <ItemNote
        class="irremovable"
        v-for="note of termData.noteList"
        :key="note.dataId"
        :blockData="note"
        contenteditable="false"
      />
    </template>
  </div>
</template>

<script>
import ItemNote from './ItemNote.vue'
import Paragraph from './Paragraph.vue'
import EditorTable from './Table.vue'
import EditorFigure from './Figure.vue'
import EditorFormula from './Formula.vue'
import EditorAbbreviation from './Abbr.vue'
import Example from './Example.vue'
import NakedFigure from './NakedFigure.vue'
import Endline from './Endline.vue'
import ItemList from './ItemList.vue'
import BlockGroup from './BlockGroup.vue'
import { Message } from 'element-ui'
import { getComponentName } from '@/utils/helpers'

export default {
  name: 'TermBlock',
  components: {
    EditorTable,
    EditorFigure,
    EditorFormula,
    EditorAbbreviation,
    Example,
    NakedFigure,
    ItemNote,
    Endline,
    BlockGroup,
    ItemList,
    Paragraph
  },
  provide: {
    pageType: ''
  },
  props: {
    blockData: {
      type: Object,
      default: () => ({})
    }
  },
  methods: { getComponentName },
  computed: {
    termListTitleType() {
      return this.$store.state.xmleditor.termListTitleType
    },
    termData() {
      return this.blockData.termData
    },
    jsonContent() {
      return this?.blockData?.termData?.jsonContent
    },
    blockList() {
      let jsonContent = []
      try {
        jsonContent = JSON.parse(this.jsonContent || '[]')
      } catch (error) {
        return Message.error('术语jsonContent错误')
      }
      return jsonContent
    }
  }
}
</script>
